/* constant */
@rem: 25rem;

.container{
  overflow: hidden;

  // 头部
  .head{
    height: 180/@rem;
    background:url("../../resource/consumer/member_center/bg.png");
    background-size:cover;
    overflow: hidden;
    color: #FFFFFF;
    margin-bottom: 15/@rem;

    img{
      width: 80/@rem;
      height: 80/@rem;
      border-radius: 80/@rem;
      margin: 15/@rem 0 0;
    }
    p{
      text-align: center;
      margin: 10/@rem;
      font-size: 15/@rem;
      span{
        margin: 0 10/@rem;
      }
    }
  }


  /* 带标题面板  */
  .sub-title-panel{
    width: 100%;
    background: #FFF;
    margin-bottom: 20/@rem;
  }
  .sub-title-panel .title{
    height: 50/@rem;
    line-height: 50/@rem;
    font-size: 15/@rem;
    border-bottom: 1/@rem solid #ddd;
    padding: 0 10/@rem;
    color: #444;
    overflow: hidden;
    text-align: left;
  }

  .color-block{
    background: #20AD20;
    height: 30/@rem;
    width: 8/@rem;
    display: inline-block;
    position: relative;
    top: 9/@rem;
    margin: 0 5/@rem;
  }
  .sub-title-panel .content{
    overflow: hidden;
  }



  /* 等级  */
  .level-module{
    margin: 15/@rem auto;
    width: 90%;

    /*滚动条  */
    .level-prog{
      width: 100%;
      margin: 0 auto;
      display: block;
    }
    .level-group{
      margin: 0 auto;
      width: 100%;
      display: flex;
    }
    .level-item{
      flex: 1;
    }
    .level-item .icon{
      width: 20/@rem;
      height: 20/@rem;
      float: left;
      position: relative;
      margin: 10/@rem 0;
    }
    .level-mark{
      width: 700/@rem;
      margin: 0 auto;
      position: relative;
    }
    .mark{
      width: 35/@rem;
      height: 40/@rem;
      position: relative;
      left: -10/@rem;
      margin-bottom: 10/@rem;
    }
    .mark .icon{
      width: 100%;
      height: 100%;
    }
    .user-integral{
      position: absolute;
      top: 5/@rem;
      left: -3/@rem;
      width: 40/@rem;
      text-align: center;
      font-size: 12/@rem;
      color: #FFF;
      margin: 0;
    }
    .level-tip-font{
      font-size: 23/@rem;
      padding: 0 20/@rem;
      margin: 20/@rem 0;
      color: #999;
    }
  }

  /* 导航  */
  .nav-group{
    padding: 0 20/@rem;
    display: flex;
    .nav-item{
      width: 100/@rem;
      padding: 15/@rem;
    }
    .nav-item-img{
      width: 30/@rem;
      height: 30/@rem;
      display: block;
      margin: 10/@rem auto;
    }
    .nav-item-title{
      font-size: 15/@rem;
      text-align: center;
      margin: 10/@rem 0;
    }
  }


  /*  提示文字  */
  .tip-group{
    padding: 15/@rem;
    text-align: left;
    .tip-title,.tip-content{
      font-size: 15/@rem;
      line-height: 2em;
      color: #444;
    }
    .tip-content{
      text-indent: 2em;
      font-size: 12/@rem;
      color: #555;
    }
  }



}
